<!--
 * @Author: your name
 * @Date: 2020-04-30 10:21:56
 * @LastEditTime: 2020-05-18 17:09:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \v-nw-h5\src\pages\store\components\master\BottomIcons.vue
 -->
<template>
    <div class="master-icons">
        <div class="displayFlex justifyCtBwt flex-algin-center">
             <span  @click="$emit('showMarsterClassify',{index:-1,classId:-1,classifyAjax:true})">
                <img class="classify-icon" src="../../../../assets/images/store/classify_icon.png" alt="">
                <span class="icon-text">分类</span>
            </span>
            <span class="goods-box-des" @click="$emit('showMarsterDetail')">详情 <span
                    class="iconfont icon-arrows_up1"></span></span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BottomIcons",
    }
</script>

<style scoped lang="scss">
    .master-icons {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 1050;
        padding: .15rem;
    }
    .classify-icon {
        width: .24rem;
    }
    .icon-text {
        display: block;
        color: #fff;
        font-size: .12rem;
    }
    .goods-box-des {
        box-sizing:border-box;
        display: inline-block;
        padding: 0 .1rem;
        background-color: rgba(0, 0, 0, .2);
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        color: #fff;
        font-size: .11rem;
        height: 0.25rem;
        line-height: .25rem;
        text-align: center;
        /* line-height: .12rem; */
        .icon-arrows_up1 {
            position: relative;
            top: .01rem;
            font-size: .16rem;
            font-weight: 900;
        }
    }
</style>